<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>好书详情</title>
		<link rel="stylesheet" href="https://dw-pro.iduov.com/dw-share/css/app.css">
		<link rel="stylesheet" href="https://dw-pro.iduov.com/dw-share/css/weekb-detail.css">
		<script src="https://dw-pro.iduov.com/dw-share/js/vendor/flexible.js"></script>
		<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
		<style>
			.fx-pyq {
				width: 30px !important;
			}
			
			#bookNav {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
			}
			
			.itemsContent {
				position: absolute;
				top: 52px;
				left: 0;
			}
		</style>

	</head>

	<body>
		<div id="book-detail" style="padding-bottom:100px">
			<div class="content" v-cloak>
				<section style="position: relative;">
					<div id="bookNav" style="background:#fff;padding:15px 4%;border-bottom:1px solid #e3e3e3">
						<ul style="display:flex">
							<li v-for="(item,attr) in obj" :class="{active:attr == active}" style="font-size:16px;color:#333333;flex:1;text-align:center;font-weight:bold" @click="move(attr)">
								<span v-text="item.type" style="padding-bottom:8px"></span>
							</li>
						</ul>
					</div>
					<div style="line-height:0.7996rem" class="font-16 font-666 itemsContent">
						<ul>
							<li class="borderBottom" v-for="(item,attr) in obj" :ref="attr">
								<div class="itemTitle">
									<div class="itemLine"></div>
									<p class="itemWords">{{item.type}}</p>
								</div>
								<div class="wordsContent" v-html="item.html"></div>
							</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			var book = new Vue({
				el: "#book-detail",
				data: {
					obj: {},
					active: "author"
				},
				computed: {
					height() {
						var obj = {}
						for(var ref in this.$refs) {
							obj[ref] = this.$refs[ref][0].offsetTop;
						}
						return obj;
					}
				},
				mounted() {
					var _this = this;
					$(window).scroll(function(){
						var scrollTop = $(this).scrollTop();
						if(scrollTop >= _this.height["author"] && scrollTop < _this.height["bookIntro"]) {
							_this.active = "author"
						} else if(scrollTop >= _this.height["bookIntro"] && scrollTop < _this.height["catalog"]) {
							_this.active = "bookIntro"
						} else if(scrollTop >= _this.height["catalog"] && scrollTop < _this.height["sentence"]) {
							_this.active = "catalog"
						} else if(scrollTop >= _this.height["sentence"]) {
							_this.active = "sentence"
						}
					})
				},
				created() {
					this.getObj();
				},
				methods: {
					getObj() {
						this.obj = window.parent.app.getPreview();
					},
					move(attr) {
						var _this = this;
						$("html,body").animate({
							scrollTop: _this.$refs[attr][0].offsetTop + 1 + "px"
						}, 500, function() {
							_this.active = attr;
						});
					}
				}
			})
		</script>
	</body>

</html>